﻿<phone:PhoneApplicationPage
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
    xmlns:models="clr-namespace:OttawaTourMap.Models"
	xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
    x:Class="OttawaTourMap.MainPage"
	SupportedOrientations="Portrait" Orientation="Portrait"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
	shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <!-- # TODO work on the animation --> 
        <!--Storyboard x:Name="BlinkLocator" AutoReverse="True" RepeatBehavior="Forever">
            <DoubleAnimation Duration="0:0:0.3" To="0" 
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
                             Storyboard.TargetName="userLocationPushPin"
                             d:IsOptimized="True">
                <DoubleAnimation.EasingFunction>
                    <CircleEase EasingMode="EaseIn" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard-->

        <Storyboard x:Name="BlinkLocator" AutoReverse="True" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetName="userLocationPushPin" 
             Storyboard.TargetProperty="Opacity"
             To="0" Duration="0:00:01" />
        </Storyboard>
        
        <ControlTemplate x:Key="userLocationStyle" TargetType="my:Pushpin">
               <Grid x:Name="ContentGrid" Width="50" Height="50"
               Margin="0">
                <Image Source="/OttawaTourMap;component/Resources/Icons/ApplicationBar/start.png" Stretch="Fill"/>
                </Grid>

      </ControlTemplate>

       


    </phone:PhoneApplicationPage.Resources>
    
    
	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>

    <!-- Application Bar -->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar x:Name="applicationBar"
							  IsVisible="True"
							  IsMenuEnabled="True"
							  Opacity="0.7">
        	<shell:ApplicationBar.MenuItems>
        		<!--shell:ApplicationBarMenuItem x:Name="FollowMe" IsEnabled="True" Text=" Stop Following Me !" Click="ApplicationBarMenuItem_Click"/-->
                <shell:ApplicationBarMenuItem x:Name="TourList" IsEnabled="True" Text=" Go To Tour List" Click="ButtonRoute_Click"/>
        	</shell:ApplicationBar.MenuItems>

            <!--shell:ApplicationBarIconButton Text="Origin" IconUri="/Resources/Icons/ApplicationBar/Location.png" Click="ButtonLocation_Click" /-->
            <!--shell:ApplicationBarIconButton Text="Route" IconUri="/Resources/Icons/ApplicationBar/Route.png"  Click="ButtonRoute_Click" /-->
            <shell:ApplicationBarIconButton Text="Directions" IconUri="/Resources/Icons/ApplicationBar/Directions.png"  Click="ButtonDirections_Click" />
            <shell:ApplicationBarIconButton Text="Mode" IconUri="/Resources/Icons/ApplicationBar/Mode.png"  Click="ButtonMode_Click" />
			<shell:ApplicationBarIconButton Text="Toggle Route" IconUri="/icons/appbar.refresh.rest.png"  Click="ButtonToggleRoute_Click" />

        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    

  

    <Canvas x:Name="LayoutRoot">

        <!-- Visual States -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="UserLocation">
                <VisualStateGroup.Transitions>
                    <VisualTransition To="ShowUserLocationUp" />
                    <VisualTransition To="ShowUserLocationDown" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="ShowUserLocationUp">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="RouteView" d:IsOptimized="True">
                            <DoubleAnimation.EasingFunction>
                                <CircleEase EasingMode="EaseIn" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="ShowUserLocationDown">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.3" To="-160" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="RouteView" d:IsOptimized="True">
                            <DoubleAnimation.EasingFunction>
                                <CircleEase EasingMode="EaseOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="RouteStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition To="ShowRoute" />
                    <VisualTransition To="HideRoute" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="ShowRoute">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="RouteView" d:IsOptimized="True">
                            <DoubleAnimation.EasingFunction>
                                <CircleEase EasingMode="EaseIn" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="HideRoute">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.3" To="-160" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="RouteView" d:IsOptimized="True">
                            <DoubleAnimation.EasingFunction>
                                <CircleEase EasingMode="EaseOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="DirectionsStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition To="ShowDirections" />
                    <VisualTransition To="HideDirections" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="ShowDirections">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="DirectionsView" d:IsOptimized="True">
                            <DoubleAnimation.EasingFunction>
                                <CircleEase EasingMode="EaseIn" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Duration="0:0:0.3" To="428" Storyboard.TargetProperty="Height" Storyboard.TargetName="MapView" d:IsOptimized="True">
                            <DoubleAnimation.EasingFunction>
                                <CircleEase EasingMode="EaseIn" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="HideDirections">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.3" To="340" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="DirectionsView" d:IsOptimized="True">
                            <DoubleAnimation.EasingFunction>
                                <CircleEase EasingMode="EaseOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Duration="0:0:0.3" To="768" Storyboard.TargetProperty="Height" Storyboard.TargetName="MapView" d:IsOptimized="True">
                            <DoubleAnimation.EasingFunction>
                                <CircleEase EasingMode="EaseOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="PushpinsStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition To="ShowPushpins" />
                    <VisualTransition To="HidePushpins" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="ShowPushpins">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Popup.IsOpen)" Storyboard.TargetName="PushpinPopup">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <System:Boolean>True</System:Boolean>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PushpinPopup" d:IsOptimized="True">
                            <DoubleAnimation.EasingFunction>
                                <CircleEase EasingMode="EaseIn" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="HidePushpins">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Popup.IsOpen)" Storyboard.TargetName="PushpinPopup">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <System:Boolean>False</System:Boolean>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PushpinPopup" d:IsOptimized="True">
                            <DoubleAnimation.EasingFunction>
                                <CircleEase EasingMode="EaseOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <!-- Map View -->
        <Border x:Name="MapView"
                Background="Black"
			    Height="768" Width="480">

            <my:Map x:Name="Map"
                    CredentialsProvider="{Binding CredentialsProvider}"
                    CopyrightVisibility="Collapsed" LogoVisibility="Collapsed"
                    ZoomLevel="{Binding Zoom, Mode=TwoWay}"
                    Center="{Binding Center, Mode=TwoWay}"
                   >
               
                <my:Map.Mode>
                    <my:AerialMode ShouldDisplayLabels="True" />
                </my:Map.Mode>

                <my:MapItemsControl ItemsSource="{Binding Routes}">
                    <my:MapItemsControl.ItemTemplate>
                        <DataTemplate>
                            <my:MapPolyline Locations="{Binding Locations}"
									   Stroke="#FF2C76B7"
									   Opacity="0.85"
									   StrokeThickness="6" />
                        </DataTemplate>
                    </my:MapItemsControl.ItemTemplate>
                </my:MapItemsControl>

                <!-- #This will draw the route followed by the user -->
                <my:MapItemsControl ItemsSource="{Binding traceUserRoute}">
                    <my:MapItemsControl.ItemTemplate>
                        <DataTemplate>
                            <my:MapPolyline Locations="{Binding userLocations}"
									   Stroke="ForestGreen"
									   Opacity="0.85"
									   StrokeThickness="6" />
                        </DataTemplate>
                    </my:MapItemsControl.ItemTemplate>
                </my:MapItemsControl> 

                
                <my:MapItemsControl ItemsSource="{Binding Itineraries}">
                    <my:MapItemsControl.ItemTemplate>
                        <DataTemplate>
                            <my:Pushpin Location="{Binding Location, Converter={StaticResource LocationGeoCoordinateConverter}}"
									    Style="{StaticResource ItineraryPushpinStyle}" />
                        </DataTemplate>
                    </my:MapItemsControl.ItemTemplate>
                </my:MapItemsControl>

                <my:MapItemsControl ItemsSource="{Binding Pushpins}">
                    <my:MapItemsControl.ItemTemplate>
                        <DataTemplate>
                            <my:Pushpin x:Name="TourPushPin" 
                                        Style="{StaticResource PushpinStyle_unvisited}"
                                        MouseLeftButtonDown="Pushpin_MouseLeftButtonUp"
                                        
                                        Location="{Binding Location}"
                                        Background="{Binding TypeName, Converter={StaticResource PushpinTypeBrushConverter}}">
                                <!--Image Source="{Binding Icon}" ></Image-->
                                <TextBlock Text="{Binding Text}" Foreground="{Binding Visited}" ></TextBlock>
                            </my:Pushpin>
                        </DataTemplate>
                    </my:MapItemsControl.ItemTemplate>
                </my:MapItemsControl>

               

                <Button x:Name="ButtonZoomIn"
                        Style="{StaticResource ButtonZoomInStyle}"
                        HorizontalAlignment="Left" VerticalAlignment="Top"
                        Height="56" Width="56" Margin="8,60,0,0"
                        Click="ButtonZoomIn_Click" />

                <Button x:Name="ButtonZoomOut"
                        Style="{StaticResource ButtonZoomOutStyle}"
                        HorizontalAlignment="Left" VerticalAlignment="Top"
                        Height="56" Width="56" Margin="8,154,0,0"
                        Click="ButtonZoomOut_Click" />
                
                <!-- User location pushpin-->
                <my:Pushpin x:Name="userLocationPushPin"
                         Location="0, 0"
                         Template="{StaticResource userLocationStyle}" 
                         
                         Margin="-16,0,0,-5" />

            </my:Map>
            
        </Border>

        <!-- Route View -->
        <Border x:Name="RouteView"
			Height="160" Margin="0"
			Padding="8" RenderTransformOrigin="0.5,0.5" Width="480"
			Background="{StaticResource ControlBackgroundBrush}">
            <Border.RenderTransform>
                <CompositeTransform TranslateY="-160"/>
            </Border.RenderTransform>

            <Grid DataContext="{Binding}">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="0.8*" />
                    <ColumnDefinition Width="0.2*"/>
                </Grid.ColumnDefinitions>
                <Button Content="Details" Grid.Column="2" Grid.Row="1"
                        Click="ButtonGo_Click" Style="{StaticResource ButtonGoStyle}" 
                        ToolTipService.ToolTip="Details" Foreground="White" Margin="-19,0,0,0" >
                	
                </Button>
                <Image Source="{Binding ThumbNailUri}" Grid.Column="1" HorizontalAlignment="Left" Margin="-42,8,0,8" Width="140" Grid.RowSpan="2" />
                <TextBlock Text="{Binding Text}" Grid.Column="1" Margin="102,8,8,0" TextWrapping="Wrap" Grid.ColumnSpan="2" TextOptions.TextHintingMode="Animated"/>
                <Button Grid.Column="1" HorizontalAlignment="Right" Margin="0,0,23,3" Grid.Row="1" VerticalAlignment="Bottom" Content="Ok" RenderTransformOrigin="0.012,0.565" Click="Button_Click"/>
            </Grid>

        </Border>

        <!-- Directions View -->
        <Border x:Name="DirectionsView"
			VerticalAlignment="Bottom"
			Height="340" RenderTransformOrigin="0.5,0.5" Canvas.Top="428" Width="480"
			Background="{StaticResource DirectionBackgroundBrush}">
            <Border.RenderTransform>
                <CompositeTransform TranslateY="340"/>
            </Border.RenderTransform>

            <ListBox ItemsSource="{Binding DirectionInformations}" Margin="0,10" SelectionChanged="DirectionSelectionChanged">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel  Orientation="Horizontal" Margin="5,2.5" d:DesignWidth="380" d:DesignHeight="233.5" Height="Auto">
                            <TextBlock Text="{Binding DirectionIndex}" TextWrapping="Wrap"
                                       Margin="5,8,0,0" FontFamily="Segoe WP"  FontWeight="Medium" FontSize="20"
                                       Foreground="#FF068909" Width="35" RenderTransformOrigin="0.5,0.5" Height="61" VerticalAlignment="Top">
                            	
                            </TextBlock>
                        	<TextBlock Text="{Binding DirectionInfo, Converter={StaticResource ItineraryTextConverter}}" 
                        		FontFamily="Segoe WP" FontWeight="Medium" FontSize="20"
                        		Margin="2,8,0,21" TextWrapping="Wrap" Width="264"/>
                            <TextBlock Text="{Binding DirectionDist}"  FontFamily="Segoe WP"  FontWeight="Medium" FontSize="20" 
                                       Height="63" Margin="2,8,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="64" Foreground="#FF0B79E0" d:LayoutOverrides="VerticalAlignment"/>
                        </StackPanel>

                        
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

        </Border>

        <Popup x:Name="PushpinPopup" IsOpen="False" Canvas.Top="330" Canvas.Left="45" Opacity="0">
            <ListBox x:Name="ListBoxPushpinCatalog"
					 Width="392" Height="56"
					 Background="{StaticResource ControlBackgroundBrush}"
					 ItemsSource="{Binding Items}"
                     SelectionChanged="ListBoxPushpinCatalog_SelectionChanged">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image Width="56" Height="56" Source="{Binding Icon}" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBox.DataContext>
                    <models:PushpinCatalog />
                </ListBox.DataContext>
            </ListBox>
        </Popup>

    </Canvas>
    
  

</phone:PhoneApplicationPage>
